<template>
	<view>
		<!-- 		<view class="header">
			<view class="header-left">
				<image :src="userInfo.avater" mode=""></image>
			</view>
			<view class="header-right">
				<button @click="login">点击登录</button>
			</view>
		</view> -->
		<view class="user-box">
			<image :src="userInfo.avater" mode=""></image>
			<button @click="login">点我登录</button>
		</view>
		<view class="image-box">
			<view class="box  box-text">
				<image src="/static/images/subscription.png" mode=""></image>
				<view class="text">订阅</view>
			</view>
			<view class="box  box-text">
				<image src="/static/images/attention.png" mode=""></image>
				<view class="text">关注</view>
			</view>
			<view class="box  box-text">
				<image src="/static/images/browse.png" mode=""></image>
				<view class="text">浏览</view>
			</view>
			<view class="box box-text">
				<image src="/static/images/apartment.png" mode=""></image>
				<view class="text">看房管理</view>
			</view>
		</view>
		<UCell :class="i==0?'money':''" :item="v" v-for="(v,i) in list" :key="v.leftUrl"></UCell>
	</view>
</template>

<script>
	import UCell from '@/components/ucell.vue'
	export default {
		components: {
			UCell,
		},
		data() {
			return {
				userInfo: {
					openid: '',
					avater: '',
					nickName: ''
				},
				list: [{
						leftUrl: "/static/images/money.png",
						leftText: "我的钱包",
						rightText: "",
						path: "/pages/mine/join"
					},
					{
						leftUrl: "/static/images/notice.png",
						leftText: "关注服务号",
						rightText: "获取最新政策、咨询",
						path: "/pages/mine/focus"
					},
					{
						leftUrl: "/static/images/customer.png",
						leftText: "客服电话",
						rightText: "10106188",
						path: ""
					},
					{
						leftUrl: "/static/images/about.png",
						leftText: "关于我们",
						rightText: "",
						path: "/pages/mine/about"
					},
					{
						leftUrl: "/static/images/bk.png",
						leftText: "加入贝壳",
						rightText: "",
						path: "/pages/mine/addUs"
					},
					{
						leftUrl: "/static/images/policy.png",
						leftText: "隐私政策",
						rightText: "",
						path: "/pages/mine/privacy"
					},
				]
			};
		},
		methods: {
			login() {
				let that = this
				// #ifdef MP-WEIXIN
				uni.login({
					success(res) {
						// console.log(res);
						let {
							code
						} = res
						uni.getUserInfo({
							success: function(infoRes) {
								// console.log(infoRes);
								// console.log('用户昵称为：' + infoRes.userInfo.nickName);
								that.userInfo.avater = infoRes.userInfo.avatarUrl
								that.userInfo.nickName = infoRes.userInfo.nickName
							}
						})
						uni.request({
							url: 'https://api.weixin.qq.com/sns/jscode2session',
							method: 'GET',
							data: {
								appid: 'wx138d22cb2301240e',
								// e088bf49f0a83af1e980d1953d9ab9fd
								secret: 'e088bf49f0a83af1e980d1953d9ab9fd',
								js_code: code,
								grant_type: 'authorization_code'
							},
							success(res) {
								// console.log(res);
								that.userInfo.openid = res.data.openid
							}
						})
					}
				});
				// #endif
				// #ifdef APP
								
									uni.getProvider({
									  service: 'oauth',
									  success: function (res) {
									    console.log(res.provider)// ['qq', 'univerify']
										
									uni.login({
										provider: 'univerify',
										univerifyStyle: { // 自定义登录框样式
									    //参考`univerifyStyle 数据结构`
									  },
										success(res){ // 登录成功
											console.log(res.authResult);  // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
										},
										fail(res){  // 登录失败
											console.log(res.errCode)
											console.log(res.errMsg)
										}
									})
									  }
									});
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
	}

	.user-box {
		width: 100%;
		height: 222rpx;
		background-color: #3e6bec;
		display: flex;
		align-items: center;
	}

	.user-box image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		background-color: #ccc;
		margin-left: 42rpx;
	}

	.user-box button {
		width: 328rpx;
		height: 108rpx;
		background: #fff;
		text-align: center;
		line-height: 108rpx;
		font-weight: 600;
		margin-right: 240rpx;
	}

	.image-box {
		width: 100%;
		height: 222rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.box {
		width: 130rpx;
		height: 105rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.box image {
		width: 100%;
		height: 49rpx;
	}

	.box .text {
		width: 100%;
		font-weight: 600;
		text-align: center;
	}

	.box-text {
		width: 130rpx;
	}

	.box-text image {
		width: 60rpx;
	}

	.uni-page-head {
		height: 283rpx;
		background-color: #4171f9;
	}
</style>